<template>
	<view class="farm">
		<view class="top df">
			<view class="bar">
				<view class="vfor" v-for="(v,i) in tabList" :key="i" @click="tabChange(i)">
					<view class="name" :class="tabIndex == i ? 'active' : ''">{{v.name}}</view>
					<view class="line" v-if="tabIndex == i"></view>
				</view>
			</view>	
		</view>
		<u-transition :show="show">
		<view class="bottom">
			<view class="vfor" v-if="landInfo.plantId">
				<view class="title">{{landInfo.variety}}</view>
				<view class="com df">
					<view class="tt">果树编号：</view>
					<view class="content" style="font-size: 28rpx;">{{landInfo.plantId}}</view>
				</view>
				<view class="df detail">
					<view class="right">
						<view class="com df">
							<view class="tt">种植时间：</view>
							<view class="content">{{landInfo.plantTime}}</view>
						</view>
						<view class="com df">
							<view class="tt">品种：</view>
							<view class="content">{{landInfo.variety}}</view>
						</view>
					</view>
					<view class="image">
						<image :src="landInfo.plantPicUrl" mode="" class="image"></image>
					</view>
				</view>
				<view class="areaDetail">
					<view class="detailVfor">
						<view class="area">
							<view class="btnSuccess" v-if="tabIndex != 2" @click="jumpToManage(landInfo)">管理果树</view>
							<view class="btnSuccess" v-if="tabIndex == 0" @click.stop="jumpToAddTask(landInfo)">{{landInfo.state == 1 ? "去采收":"已采收"}}</view>
							<view class="btnSuccess" v-if="tabIndex == 1" @click.stop="jumpToAddTask(landInfo)">{{landInfo.state == 2 ? "继续采收":"已采收"}}</view>
							<view class="btnMail" v-if="tabIndex == 2" @click.stop="jumpToMail(landInfo)">邮寄产出物/查看物流</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u--text  bold align="center" type="info" text="暂无数据"></u--text>
			</view>
		</view>
		</u-transition>
	</view>
</template>

<script>
	import {findPlantSByPlantIdAndState,addTask} from "@/api/api.js"
	export default {
		data() {
			return {
				show:false,
				tabIndex: 0,
				tabList: [
					{
						name: '待采收'
					},
					{
						name: '部分采收'
					},
					{
						name: '已采收'
					},
				],
				list: [],
				landInfo:{},
				plantId:""
			}
		},
		onLoad(option) {
			console.log(option);
			let query = `plantId=${option.plantId}&status=${this.tabIndex+1}`
			this.plantId = option.plantId
			this.getLandInfo(query)
		},
		methods: {
			tabChange(i) {
				this.tabIndex = i
				this.getLandInfo(`plantId=${this.plantId}&status=${i+1}`)
			},
			async getLandInfo(query){
				uni.showLoading({
					mask:true
				})
				this.show = false
				const res = await findPlantSByPlantIdAndState(query)
				console.log(res);
				if(res?.data.code == 200){
					if(res.data.msg === null){
						this.landInfo = {}
					}else{
						this.landInfo = res.data.data
					}
					setTimeout(()=>{
						uni.hideLoading()
						this.show = true
					},300)
				}else{
					uni.hideLoading()
					uni.$u.toast(res.data.msg)
				}
			},
			jumpToMail(item){
				uni.navigateTo({
					url:"/pages/user/mailFruit?plantId="+item.plantId+"&img="+item.plantPicUrl
				})
			},
			jumpToManage(item){
					uni.navigateTo({
						url:'/pages/user/myFarmDetail?landId='+this.plantId+'&landMsgId='+item.landMsgId+'&VarietyId='+item.varietyId
					})
			},
			goPlant(){
				uni.navigateTo({
					url:`/pages/user/myFarm?landId=${this.plantId}&status=${this.tabIndex}`
				})
			},
			jumpToAddTask(item){
					uni.navigateTo({
						url:"/pages/user/addTask?VarietyId="+item.varietyId+"&landMsgId="+item.landMsgId+'&landId='+this.plantId
					})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.farm {
		.df {
			display: flex;
		}
		.top {
			width: 690rpx;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx 30rpx;
			overflow: hidden;
			.bar{
				overflow-x: scroll;
				display: flex;
			}
			.vfor {
				width: 230rpx;
				.name {
					width: 230rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					color: #1D1D1D;
					font-size: 30rpx;
					letter-spacing: 2rpx;
				}
		
				.active {
					color: #17CC77;
					font-size: 32rpx;
					font-weight: bold;
					background: #F4F6F9;
				}
		
				.line {
					margin: auto;
					margin-top: 10rpx;
					width: 190rpx;
					height: 6rpx;
					background: #17CC77;
					border-radius: 10rpx;
				}
			}
		}
		
		

		.bottom {
			padding: 20rpx 30rpx;

			.vfor {
				width: 650rpx;
				// height: 497rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				padding: 35rpx 20rpx 20rpx;

				.title {
					font-size: 30rpx;
					color: #282828;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.detail {
					padding-bottom: 20rpx;
					.image {
						width: 227rpx;
						height: 190rpx;
						border-radius: 20rpx;
						margin-left: 20rpx;
					}


					.right {
						// padding-top: 23rpx;
					}
				}

				.areaDetail {	
					.detailVfor {
						padding-top: 20rpx;
						position: relative;
						.area{
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
						.btnSuccess {
							width: 45%;
							margin-bottom: 15rpx;
							text-align: right;
							padding:0 10rpx;
							height: 56rpx;
							background: #17CC77;
							border-radius: 8rpx;
							text-align: center;
							line-height: 56rpx;
							color: #FFFFFF;
							font-size: 28rpx;
						}
						.btnMail {
							width: 100%;
							padding:0 10rpx;
							height: 56rpx;
							margin-left: 16rpx;
							background: rgba(23, 204, 119, 0.06);
							border-radius: 8rpx;
							border: 2rpx solid #17CC77;
							text-align: center;
							line-height: 56rpx;
							color: #17CC77;
							font-size: 28rpx;
							margin-right: 16rpx;
						}
							
					}
				}

				.com {
					font-size: 26rpx;
					margin-bottom: 20rpx;

					.tt {
						color: rgba(68, 78, 104, 0.7);
						white-space: nowrap;
						// width: 130rpx;
					}

					.content {
						color: #1D1D1D;
						text-align: left;
					}
				}
			}
		}
	}
</style>